<template>
  <div>
    <!-- 搜索 -->
    <el-form :model="formItem"  label-width="80px" :inline="true" class="demo-form-inline">
      <!--<el-form-item label="活动">
        <el-select v-model="formItem.activity_id" clearable placeholder="请选择">
          <el-option v-for="(item,index) in activityData" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>-->
      <el-form-item label="类型">
        <el-select v-model="formItem.time_type" clearable placeholder="请选择">
          <el-option label="日" value="days"></el-option>
          <el-option label="月" value="month"></el-option>
          <el-option label="季度" value="quarter"></el-option>
          <el-option label="年" value="year"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker v-model="formItem.start_time" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker v-model="formItem.end_time" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchSubmit('formItem')">搜索</el-button>
        <el-button type="primary" icon="el-icon-s-data" @click="chart()">图表</el-button>
      </el-form-item>
    </el-form>
    <div style="margin-bottom: 10px;">
      <el-button @click.native="exports()" type="primary" size="small" icon="el-icon-download">导出</el-button>
    </div>
    <div v-if="showTable">
      <el-table ref="selection" :data="listData" border tooltip-effect="dark" style="width: 100%"  @selection-change="select">
        <el-table-column fixed type="selection" width="55"></el-table-column>

        <el-table-column prop="name" label="用户名称" show-overflow-tooltip width="300">
          <template slot-scope="scope">
            {{scope.row.user ? scope.row.user.name : ''}}
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="用户手机" show-overflow-tooltip width="300">
          <template slot-scope="scope">
            {{scope.row.user ? scope.row.user.mobile : ''}}
          </template>
        </el-table-column>
        <el-table-column prop="date" label="时间" width="200"></el-table-column>
        <el-table-column prop="steps" label="步数" width="200"></el-table-column>
      </el-table>
    </div>
    <div v-if="showTable" class="block" style="text-align : right; float : right; margin-top: 10px;">
        <!--<span class="demonstration">完整功能</span>-->
        <el-pagination
                @size-change="handlePageSize"
                @current-change="handlePage"
                :current-page="pageNum"
                :page-sizes="[10, 50, 100, 200]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageTotal">
        </el-pagination>
      </div>

    <div v-if="showChart">
      <div id="myChart" :style="{width: '100%', height: '400px'}"></div>
    </div>
  </div>
</template>
<script>
import axios from "@/axios";
import { isIntNum,getHeaders } from "@/assets/js/common";
import moment from 'moment'
export default {
  data() {
    return {
      formItem: {
        time_type: "",
        start_time: "",
        end_time: ""
      },
      ids: [],
      listData: [],
      pageTotal: 0,
      pageNum: 1,
      pageSize: 10,
      headers: {},
      showTable: true,
      showChart: false,
    };
  },
  mounted() {
    this.base = JSON.parse(sessionStorage.base);
    // 活动列表
    this.getUserJoinList();
  },
  methods: {
    //获取勾选参数
    select(val) {
      let vm = this;
      vm.ids = [];
      for (let i in val) {
        vm.ids.push(val[i].id);
      }
    },
    //当前页数
    handlePage(value) {
      this.pageNum = value;
      this.getUserJoinList();
    },
    //每页显示条数
    handlePageSize(value) {
      this.pageSize = value;
      this.getUserJoinList();
    },
    //获取用户参与列表
    getUserJoinList() {
      let vm = this;
      axios
        .post("/admin/count/userJoinStatistic", {
          page: this.pageNum,
          limit: this.pageSize,
          start_time: this.formItem.start_time ? moment(this.formItem.start_time).format('YYYY-MM-DD') : "",
          end_time: this.formItem.end_time ? moment(this.formItem.end_time).format('YYYY-MM-DD') : "",
          time_type: this.formItem.time_type
        })
        .then(response => {
          let status = response.status;
          let data = response.data;
          if (data.code == 200) {
            let result = data.data;
            vm.pageTotal = result.total;
            vm.listData = result.list;
          } else {
            vm.$message.info(data.message);
          }
        })
        .catch(error => {
          // vm.$Message.info("网络或服务器异常");
        });
    },
    //搜索
    searchSubmit() {
      this.pageNum = 1;
      if (this.showChart === true) {
        // 统计
        this.statistics();
      }else{
        this.getUserJoinList();
      }
    },
    // 导出
    exports() {
      let vm = this;
      let http_url = vm.base.domain_name + '/admin/count/userJoinExport';
      let start_time=this.formItem.start_time ? moment(this.formItem.start_time).format('YYYY-MM-DD') : "";
      let end_time = this.formItem.end_time ? moment(this.formItem.end_time).format('YYYY-MM-DD') : "";
      let params = '?page='+vm.pageNum+"&limit="+vm.pageSize+"&start_time="+start_time+"&end_time="+end_time;
      window.open(http_url+params,"_blank");
    },
    // 点击图表/列表切换
    chart() {
      this.showChart = !this.showChart;
      this.showTable = !this.showTable;
      if (this.showChart === true) {
        // 统计
        this.statistics();
      }else{
        this.getUserJoinList();
      }
    },
    // 订单统计
    statistics() {
      let vm = this;
      vm.formItem.start_time = vm.formItem.start_time ? moment(vm.formItem.start_time).format('YYYY-MM-DD') : "";
      vm.formItem.end_time = vm.formItem.start_time ? moment(vm.formItem.end_time).format('YYYY-MM-DD') : "";
      axios
        .post("/admin/count/userJoinChart", vm.formItem)
        .then(response => {
          let data = response.data;
          if (data.code == 200) {
            let result = data.data;
            this.chartInit(result);
          } else {
            vm.$message.info(data.message);
          }
        })
        .catch(error => {
          // vm.$Message.info("网络或服务器异常");
        });
    },
    // 图表
    chartInit(data){
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'));
      // 绘制图表
      myChart.setOption({
        title: {
          text: '',
          textStyle: {
            color: "rgb(85, 85, 85)",
            fontSize: 18,
            fontStyle: "normal",
            fontWeight: "normal"
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['总步数','参与人数'],
          selectedMode: false,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {
              show: false,
              readOnly: true
            },
            magicType: {
              show: true,
              type: ["line", "bar", "tiled"]
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            },
            mark: {
              show: false
            }
          }
        },
        calculable: false,
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.times
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '总步数',
            type: 'line',
            stack: '总量',
            data: data.data1
          },
          {
            name: '参与人数',
            type: 'line',
            stack: '总量',
            data: data.data2
          }
        ]
      });
    },
  }
};
</script>